<template>
    <div>
        <img
            class="back"
            :src="dataSource"
        >
        <div class="cont">
            <div>
                <input
                    type="text"
                    v-model="code"
                    placeholder="输入口令"
                >
            </div>
            <div @click="click()">
                <img src="../../asset/icon/icon_home_money.png">
                <span>立即领取</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "enter",
    data() {
        return {
            dataSource: {},
            code: '',
        };
    },
    methods: {
        // 方法
        click() {
            let params = {
                code: this.code,
            };
            this.$post("/weixinhao/use_code", params)
                .then(res => {
                    if (res.code === 20000) {
                        this.$dialog.toast({
                            mes: '领取成功',
                            timeout: 1000,
                            callback: () => {
                                this.$router.back(-1)
                            }
                        });

                    } else {
                        this.code = ''
                        this.$dialog.toast({ mes: res.msg, timeout: 1000 });
                    }
                })
                .catch(err => { });
        },
        getBackUrl() {
            let params = {};
            this.$post("/index/get_kouling_img", params)
                .then(res => {
                    if (res.code === 20000) {
                        this.dataSource = res.data
                    }
                })
                .catch(err => { });
        }
    },
    beforeCreate() {
        document.querySelector("body").setAttribute("style", "background-color:#fff");
    },
    created() {
        // 实例创建完成
        this.getBackUrl();
    },
};
</script>
<style lang="less" scoped>
.back {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cont {
    position: fixed;
    bottom: 15px;
    left: 50%;
    margin-left: -172.5px;
    width: 345px;
    height: 118px;
    background-image: linear-gradient(45deg, #7b77ff 0%, #515bff 100%);
    box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    > div:nth-of-type(1) {
        width: 300px;
        height: 40px;
        background-color: #ffffff;
        box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
        border-radius: 23px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            width: 15px;
            height: 16px;
        }
        input {
            text-align: center;
            font-size: 16px;
            color: #666666;
        }
    }
    > div:nth-of-type(2) {
        margin-top: 10px;
        width: 300px;
        height: 40px;
        background-image: linear-gradient(45deg, #ffd53c 0%, #ffa722 100%);
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            width: 17px;
            height: 17px;
        }
        span {
            padding-left: 5px;
            font-size: 16px;
            color: #ffffff;
        }
    }
}
</style>